<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2025-07-02 20:46:10
 * @LastEditors: sueRimn
 * @LastEditTime: 2025-07-03 09:54:14
-->
<template>
  <view class="category-icons-container">
      <view v-for="(item, index) in navigateItems" :key="index" class="category-icon-item">
        <view class="flex-col" @click="urlJump(item)">
          <common-image :src="item.image" 
          :styles="'width: 96rpx; height: 96rpx;'"
          class="category-icon" mode="aspectFit"  />
        </view>
        <text class="category-item">{{item.bannerName}}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CategoryNavigation',
  props: {
    navigateItems: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleNav(item) {
      if (item.skipId) {
        uni.navigateTo({
          url: item.skipId
        })
      } else {
        // 默认导航到分类页面
        uni.navigateTo({
          url: '/pages/category/index'
        })
      }
    }
  }
}
</script>

<style scoped>
.category-icons-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 20rpx auto 0;
  background: #FFFFFF;
  border-radius: 32rpx;
  padding: 20rpx 0 4rpx;
}

.category-icon-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.category-icon {
  width: 96rpx;
  height: 96rpx;
}

.category-item {
  font-size: 24rpx;
  color: #333;
  margin-top: 16rpx;
  text-align: center;
}
</style>
